<!--轮播图-->
<template>
  <div class="box">
    <div class="banner">
      <swiper :options="swiperOption" v-if="banner.length > 0">
        <swiper-slide
          v-for="item in banner"
          :key="item.id"
          :style="{ background : `url( '${item.url}' ) 50% 50% no-repeat` }"
        ></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      </swiper>
    </div>

    <div class="rightBox" v-if="this.cate.length">
      <el-tabs type="border-card">
        <el-tab-pane :label="cate[0].name" >
          <a v-for="items in cate[0].children" :key="items.id" @click="jumpDetails(items)">
            <el-tooltip :content="items.title" placement="right-end" effect="light">
              <span>{{items.title}}</span>
            </el-tooltip>
          </a>
        </el-tab-pane>
        <el-tab-pane :label="cate[1].name">
          <a @click="jumpDetails(items)" v-for="items in cate[1].children" :key="items.id">
            <el-tooltip :content="items.title" placement="right-start" effect="light">
              <span>{{items.title}}</span>
            </el-tooltip>
          </a>
        </el-tab-pane>
        <el-tab-pane :label="cate[2].name">
          <a @click="jumpDetails(items)" v-for="items in cate[2].children" :key="items.id">
            <el-tooltip :content="items.title" placement="right-start" effect="light">
              <span>{{items.title}}</span>
            </el-tooltip>
          </a>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: "Banner",
  data() {
    return {
      banner: [],
      // goodscate: [], // 商品分类
      swiperOption: {
        spaceBetween: 30,
        effect: "fade",
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },

        observer: true,
        observeParents: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      cate: [],
      temp: [],
      page: 1 // 分页的初始化的数据
    };
  },
  methods: {
    jumpDetails(item) {
      console.log(item);
      this.$store.commit("newDetails", item);
      this.$router.push({
        name: "ConsultingDetails"
      });
    },

    //获取咨询数据
   async  consult() {
      const infocon =await  this.$http("/api/home/advisory_center/newscate");
      console.log("--------------------------------------------------");
      console.log(infocon);
      this.cate = infocon.data.cate;
      console.log(this.cate, "dasdadadasdasdas");
    },

    async shopping_num() {
      if (this.$store.state.UserInfor.user_id) {
        let user_id = this.$store.state.UserInfor.user_id;
        let res = await this.$http({
          method: "post",
          url: "/api/index/index/cartNum",
          data: {
            user_id
          }
        });
        if (res.data.State.Code == 200) {
          this.$store.commit("shopping_num", res.data.data);
        }
      }
    },

    httpInit() {
      let user_id = this.$store.state.UserInfor.user_id || "";
      console.log(user_id);
      this.$http({
        method: "post",
        url: "/api/index/index/apiIndex",
        data: {
          user_id
        }
      })
        .then(response => {
          if (response.data.State.Code) {
            let DATA = response.data.data;
            this.banner = DATA.carousel;
            console.log(this.banner);
            let newnavigation = DATA.navigation.splice(3, 1);
            let newnavigation1 = DATA.navigation.splice(4, 1);
            this.$store.commit("nav", DATA.navigation); // 把导航数组传递给vuex
            // console.log(DATA.navigation);
            // console.log(newnavigation);

            console.log(DATA.goodscate);
            this.$store.commit("bannerNav", DATA.goodscate); // 把数组传递给vuex
          } else {
            console.log("数据异常");
          }
        })
        .catch(error => {
          console.log(error);
        });

    }
  },
  created() {
    console.log("banner子组件创建");
    this.consult();
  },
  mounted() {
    
    console.log("banner子组件挂载");
    this.httpInit();
    this.shopping_num();
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .banner {
    width: 899px;
    height: 335px;

    position: relative;
    /deep/ .swiper-container {
      // 分頁器的樣式
      .swiper-pagination {
        bottom: 0px;
        z-index: 10;
        .swiper-pagination-bullet {
          width: 14px;
          height: 14px;
          opacity: 1;
          background: rgba(255, 255, 255, 0.7);
        }
        .swiper-pagination-bullet-active {
          opacity: 1;
          background: #ff7800;
        }
      }
      .swiper-wrapper {
        .swiper-slide {
          width: 100%;
          height: 335px;
        }
      }
    }
  }
  .rightBox {
    box-sizing: border-box;
    width: 294.5px;
    height: 335px;
    background: #fff;
    // border: 1px solid #ccc;
    a {
      display: block;
      overflow: hidden; //超出部分隐藏
      text-overflow: ellipsis; //超出部分显示...
      white-space: nowrap; //文本强制一行显示
      margin: 4.7px 8px;
      color: #333;
      &:hover {
        color: #0a83e7;
      }
    }
  }
}
</style>
<style lang="scss">
.el-tabs--border-card > .el-tabs__content {
  height: 263px;
}
.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
  margin-top: 2px;
  height: 20px;
}
</style>





